<template>
  <uni-popup ref="popup" type="bottom" class="popup">
    <view class="popup-content">
      <view class="picker-header">
        <view @click="onClose">取消</view>
        <view v-if="title" class="packer-title">{{ title }}</view>
        <view @click="onConfirm">确定</view>
      </view>
      <picker-view :value="value" @change="onChange" class="picker">
        <picker-view-column>
          <view class="picker-row" v-for="item in options" :key="item.value">
            {{ item.name }}
          </view>
        </picker-view-column>
      </picker-view>
    </view>
  </uni-popup>
</template>

<script>
import { getClassList } from '@/api/duty-basic/duty-shifting.js';
import { mapGetters } from 'vuex';
import dayjs from 'dayjs';
export default {
  props: {
    title: String,
    date: String, // 父级传进来的日期
    itemId: [Number, String], // 事项id
    excludeClassIds: Array,
  },
  data() {
    return {
      options: [],
      value: [0],
      scheduledClassList: [],
    };
  },
  methods: {
    // 打开
    open() {
      this.$refs.popup.open();
    },
    //确定
    onConfirm() {
      let selectData = {};
      if (Array.isArray(this.value) && this.value.length) {
        selectData = {
          value: this.options[this.value[0]]?.value,
          name: this.options[this.value[0]]?.name,
          teamDate: this.options[this.value[0]]?.teamDate,
        };
      }

      this.$emit('confirm', selectData);
      this.onClose();
    },
    // 取消
    onClose() {
      this.$refs.popup.close();
    },
    //滑动picker
    onChange(e) {
      this.value = e.detail.value;
    },
    async query() {
      if (this.date && this.itemId) {
        const { data } = await getClassList(
          this.itemId,
          dayjs(this.date).format('YYYY-MM-DD HH:mm:ss')
        );
        this.options = data.map((item) => ({
          name: item.className,
          value: item.classId,
          teamDate: item.teamDate,
        }));
        console.log(this.excludeClassIds);
        for (let i of this.options) {
          if (this.excludeClassIds.includes(i.value)) {
            i.disabled = true;
          } else {
            i.disabled = false;
          }
        }
        this.options = this.options.filter((item) => item.disabled === false);
      }
    },
  },
  computed: {
    ...mapGetters(['deptId', 'staffId']),
  },
  created() {
    if (this.date && this.itemId) this.query();
  },
  watch: {
    date: function (val) {
      if (val) {
        this.query();
      }
    },
    itemId: function (val) {
      if (val) {
        this.query();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .bottom {
  margin-bottom: 0 !important;
}

.popup-content {
  background: #fff;
}

.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 20rpx;
  padding: 20rpx 0;
}

.picker {
  height: 490rpx;
}

.picker-row {
  text-align: center;
  line-height: 70rpx;
  text-overflow: ellipsis;
}
</style>
